<template>
  <div>
    <el-button type="primary" @click="openDialog">收单</el-button>

    <el-dialog :visible.sync="dialogVisible" title="收单">
      <el-table :data="assignedWorkOrders" @selection-change="handleSelectionChange" v-loading="loading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="personnel_name" label="客户名称"></el-table-column>
        <el-table-column prop="business_name" label="业务名称"></el-table-column>
        <el-table-column prop="status" label="状态"></el-table-column>
      </el-table>

      <div v-if="selectedWorkOrder">
        
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleComplete">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      dialogVisible: false,
      assignedWorkOrders: [],
      selectedWorkOrder: null,
      loading: false
    };
  },
  methods: {
     
    async openDialog() {
      this.dialogVisible = true;
      this.loading = true;
      try {
        const response = await axios.post('/api/order/assigned');
        console.log(response)
        this.assignedWorkOrders = response.data;
      } catch (error) {
        console.log(error)
        this.$message.error('获取已派单工单失败');
      } finally {
        this.loading = false;
      }
    },
    handleSelectionChange(val) {
      this.selectedWorkOrder = val[0];
    },
    async handleComplete() {
      if (!this.selectedWorkOrder) {
        this.$message.warning('请选择一个工单');
        return;
      }
      try {
      
        await axios.post('/api/order/shoudan',this.selectedWorkOrder.id, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
        this.$message.success('收单成功');
        this.dialogVisible = false;
        // 刷新工单列表
        this.openDialog();
      } catch (error) {
        this.$message.error('收单失败');
      }
    }
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
